<template>
  <base-popup :show="show" @close="closeModel(true)">
    <view class="popup">
      <view class="maskContainer couponMask">
        <view class="couponContainer2">
          <view class="title">{{ couponList.length ? coupontitle : '不可使用优惠券' }}</view>
          <view class="coupnItemScroll">
            <view class="coupnItemBox">
              <scroll-view scroll-y="true" class="scroll-Y">
                <view v-for="item in couponList" :key="item.coupon_id" class="couponItem" :class="{'couponSelected': selectedCoupon.coupon_id && item.coupon_id === selectedCoupon.coupon_id}" @click="selectCoupon(item)">
                  <view class="quota">
                    <view class="o-b"><text class="o-small">¥</text>{{ item.price }}</view>
                    <view class="o-span">{{ item.standard_price ? `满${item.standard_price}可用` : '无门槛' }}</view>
                  </view>
                  <view class="descripe">
                    <view class="o-p">{{ item.name }}</view>
                    <view v-if="item.use_time_type === 'BY_DAYS' && item.use_days" class="o-span">
                      有效期: 领取后{{ item.use_days }}天内有效
                    </view>
                    <view v-else class="o-span">{{ _parseTime(new Date(item.use_start_time * 1000), '{y}-{m}-{d}') }} - {{ _parseTime(new Date(item.use_stop_time * 1000), '{y}-{m}-{d}') }}</view>
                  </view>
                  <view class="coupnStateBox">
                    <view v-if="selectedCoupon && item.coupon_id === selectedCoupon.coupon_id" class="couponChecked">
                      <image src="/static/images/icon/coupon_checked.png" />
                    </view>
                    <view v-else class="couponChecked">
                      <image src="/static/images/icon/coupon_check.png" />
                    </view>
                  </view>
                </view>
                <view v-if="unusableCouponList.length > 0" class="title title2">不可使用优惠券</view>
                <view v-for="item in unusableCouponList" :key="item.coupon_id" class="couponItem unuse">
                  <view class="quota">
                    <view class="o-b"><text class="o-small">¥</text>{{ item.price }}</view>
                    <view class="o-span">{{ item.standard_price ? `满${item.standard_price}可用` : '无门槛' }}</view>
                  </view>
                  <view class="descripe">
                    <view class="o-p">{{ item.name }}</view>
                    <text v-if="item.use_time_type === 'BY_DAYS' && item.use_days" class="o-span">
                      有效期: 领取后{{ item.use_days }}天内有效
                    </text>
                    <text v-else class="o-span">{{ _parseTime(new Date(item.use_start_time * 1000), '{y}-{m}-{d}') }} - {{ _parseTime(new Date(item.use_stop_time * 1000), '{y}-{m}-{d}') }}</text>
                  </view>
                </view>
              </scroll-view>
              <view class="fixed" @click="closeModel(false)">
                <view class="descripe2" style="align-items: center;">
                  不使用优惠券
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </base-popup>
</template>

<script>
import BasePopup from '@/components/base/base-popup'
import { parseTime } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    BasePopup
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    couponList: {
      type: Array,
      default: () => {
        return []
      }
    },
    unusableCouponList: {
      type: Array,
      default: () => {
        return []
      }
    },
    selectedCoupon: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      coupontitle: '可使用优惠券'
    }
  },
  methods: {
    _parseTime(time, par) {
      return parseTime(time, par)
    },
    selectCoupon(data) {
      this.$emit('selectCoup', { item: data, type: 'coupon' })
    },
    closeModel(flag) {
      this.$emit('close', { item: {}, type: 'coupon', isClose: flag })
    }
  }
}
</script>

